<template>
  <!-- <HeaderBar /> -->
  <div class="banner"></div>
  <div class="full">
    <div class="container">
      <div class="nav">
        <div class="left">
          <div class="left-item">
            <div class="iconfont icon-shouye"></div>
            <div class="label">首页</div>
          </div>
          <div class="left-item">
            <div class="iconfont icon-000"></div>
            <div class="label">动态</div>
          </div>
          <div class="left-item">
            <div class="iconfont icon-huore"></div>
            <div class="label">火热</div>
          </div>
          <div class="left-item">
            <div class="iconfont icon-pindao"></div>
            <div class="label">频道</div>
          </div>
        </div>
        <div class="mid">
          <div class="mid-item">
            <span class="name">动画</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">音乐</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">舞蹈</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">知识</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">生活</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">时尚</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">娱乐</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">放映厅</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">番剧</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">国创</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">游戏</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">科技</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">鬼畜</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">咨询</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">影视</span>
            <span class="count">999+</span>
          </div>
          <div class="mid-item">
            <span class="name">更多</span>
            <span class="iconfont icon-xia last"></span>
          </div>
        </div>
        <div class="right">
          <div class="right-item">
            <ElIcon color="pink" size="22px"><Briefcase /></ElIcon>
            <div class="name">专栏</div>
          </div>
          <div class="right-item">
            <ElIcon color="pink" size="22px"><Briefcase /></ElIcon>
            <div class="name">活动</div>
          </div>
          <div class="right-item">
            <ElIcon color="pink" size="22px"><Briefcase /></ElIcon>
            <div class="name">小黑屋</div>
          </div>
          <div class="right-item">
            <ElIcon color="pink" size="22px"><Briefcase /></ElIcon>
            <div class="name">直播</div>
          </div>
          <div class="right-item">
            <ElIcon color="pink" size="22px"><Briefcase /></ElIcon>
            <div class="name">课堂</div>
          </div>
          <div class="right-item">
            <ElIcon color="pink" size="22px"><Briefcase /></ElIcon>
            <div class="name">新歌榜</div>
          </div>
        </div>
      </div>
      <div class="head">
        <div class="Carousel-warpper">
          <ElCarousel
            autoplay
            height="240px"
            arrow="never"
            indicator-position="none"
            @change="CarouselChange"
            ref="CarouselRef"
          >
            <ElCarouselItem v-for="item in CarouselList" :key="item">
              <div class="Carousel-img" :style="`background-image: url(${item})`"></div>
            </ElCarouselItem>
          </ElCarousel>
          <div class="Carousel-ctrl">
            <div
              v-for="(item, index) in CarouselList"
              class="pointer"
              :key="item"
              @click="changeImg(index)"
            >
              <span :class="currentIndex === index && 'active'"></span>
            </div>
          </div>
        </div>
        <div class="head-right">
          <div
            v-for="item in topVideos"
            :key="item.id"
            class="item"
            :style="`background-image: url(${item.pic})`"
            @click="routerToVideo(item.id, item.bvid)"
          >
            <!-- :style="`background-image: url(${item.pic})`" -->
            <div class="mask">
              <span class="title">
                {{ item.title }}
              </span>
              <div class="uper">
                <span class="iconfont icon-upzhux"></span>
                <span class="nickname">{{ item.owner.name }}</span>
              </div>
              <div class="play-count">{{ localNum(item.stat.view, 1) }}播放</div>
              <span class="iconfont icon-zhongbo play-icon"></span>
            </div>
          </div>
          <div @click="getTopVideo" class="change-top-video">
            <span class="iconfont icon-update"></span>
            <span>换一换</span>
          </div>
        </div>
      </div>

      <div
        class="main-item"
        v-for="(region, index) in regionSections"
        :key="region.rid"
        :ref="(el) => (reginRef[index] = el)"
        :data-rid="region.rid"
      >
        <div class="left">
          <div class="title">
            <div class="title-left">
              <img :src="region.img" />
              <div class="section-name">{{ region.name }}</div>
            </div>
            <div class="title-right">
              <span class="change">
                <span class="iconfont icon-update"></span>
                <span @click="getRegion(index, region.rid, region.pn + 1)">换一换</span>
              </span>
              <span class="more">
                <span>更多</span>
                <span class="iconfont icon-you"></span>
              </span>
            </div>
          </div>
          <div class="video-list" v-loading="region.archivesLoading">
            <div class="video-item" v-for="video in region.archives" :key="video.aid">
              <div class="img-warpper" @click="routerToVideo(video.aid, video.bvid)">
                <img :src="video.pic" />
                <div class="label">
                  <span class="iconfont icon-shipin"></span>
                  <span class="play-count">{{ localNum(video.stat.view, 1) }}</span>
                  <span class="iconfont icon-dianzan"></span>
                  <span class="play-count">{{ localNum(video.stat.like, 1) }}</span>
                </div>
                <span class="time">{{ moment(video.duration * 1000).format('mm:ss') }}</span>
              </div>
              <p @click="routerToVideo(video.aid, video.bvid)">{{ video.title }}</p>
              <div
                class="ower"
                @click="$router.push({ name: 'Personal', query: { hostMid: video.owner.mid } })"
              >
                <span class="iconfont icon-upzhux"></span>
                <span>{{ video.owner.name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="rank">
          <div class="rank-title">
            <div class="header">排行榜</div>
            <span class="more">
              <span>更多</span>
              <span class="iconfont icon-you"></span>
            </span>
          </div>
          <div class="rank-main" v-loading="region.rankLoading">
            <template v-for="(rank, i) in region.rank" :key="rank.aid">
              <ElPopover
                trigger="hover"
                :show-after="400"
                :show-arrow="false"
                :width="300"
                :offset="-5"
                placement="top-start"
              >
                <template #reference>
                  <div class="rank-item" @click="routerToVideo(Number(rank.aid), rank.bvid)">
                    <div class="index">{{ i + 1 }}</div>
                    <div class="rank-name">{{ rank.title }}</div>
                  </div>
                </template>

                <div class="rank-popover" @click="routerToVideo(Number(rank.aid), rank.bvid)">
                  <div class="rank-popover-top">
                    <img :src="rank.pic" />
                    <div class="rank-popover-info">
                      <div class="v-rank-name">{{ rank.title }}</div>
                      <div class="rank-popover-uper-time">
                        <span class="rank-popover-uper">{{ rank.author }}</span> ·
                        <span class="rank-popover-time">{{ rank.create.split(' ')[0] }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="divider"></div>
                  <div class="rank-popover-footer">
                    <div class="status">
                      <span class="iconfont icon-shipin"></span>
                      <span class="rank-count">{{ localNum(rank.play, 1) }}</span>
                    </div>
                    <div class="status">
                      <span class="iconfont icon-danmushu"></span>
                      <span class="rank-count">{{ localNum(rank.video_review, 1) }}</span>
                    </div>
                    <div class="status">
                      <span class="iconfont icon-shoucang"></span>
                      <span class="rank-count">{{ localNum(rank.favorites, 1) }}</span>
                    </div>
                    <div class="status">
                      <span class="iconfont icon-Bbi"></span>
                      <span class="rank-count">{{ localNum(rank.coins, 1) }}</span>
                    </div>
                  </div>
                </div>
              </ElPopover>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="scroll-nav">
    <span
      v-for="(item, index) in regionSections"
      :key="index"
      :ref="(el) => (navRef[index] = el)"
      :class="currRegionIndex === index && 'on'"
      @click="handleScroll(index)"
    >
      {{ item.name }}
    </span>
  </div>

  <div class="full footer">
    <div class="container">
      <!-- <img
        src="http://images.weserv.nl?url=i2.hdslb.com/bfs/face/f778169b7f23ce13b23b6e690035524ec0d81315.jpg"
        alt=""
      /> -->

      <!-- <div
        style="
          width: 200px;
          height: 200px;
          background-image: url(http://i2.hdslb.com/bfs/face/f778169b7f23ce13b23b6e690035524ec0d81315.jpg);
        "
      ></div> -->
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, watch, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'

  // import { ElCarouselItem, ElCarousel, ElPopover, ElIcon } from 'element-plus'
  import { formatImgUrl, throttle } from '@/utils/lib'
  import { reqRank, reqRegion, reqTopVideo } from '@/api/home'
  import type { TopVideoModel } from '@/api/home'
  export default defineComponent({
    name: 'Home',
  })
</script>

<script lang="ts" setup>
  import { Briefcase } from '@element-plus/icons'
  // import HeaderBar from '@/components/HeaderBar/index.vue'
  import { CarouselList, nativeRegion } from './renderData'
  import { localNum } from '@/utils/lib'
  import moment from 'moment'
  // import side1 from './image/cal/side1.jpg'
  // import side2 from './image/cal/side2.jpg'
  // import side3 from './image/cal/side3.jpg'
  // import side4 from './image/cal/side4.jpg'
  // import side5 from './image/cal/side5.jpg'
  // import side6 from './image/cal/side6.jpg'

  // const sides = [side1, side2, side3, side4, side5, side6]

  //* -------------轮播图渲染、手动控制逻辑---------------------

  const currentIndex = ref(0) //当前轮播图的index

  const CarouselChange = (newIndex: number) => {
    currentIndex.value = newIndex
  }

  const CarouselRef = ref()

  const changeImg = (index: number) => {
    CarouselRef.value.setActiveItem(index)
  }

  //* ------------------请求渲染-----------------------

  const topVideos = ref<TopVideoModel[]>([])

  const regionSections = reactive(nativeRegion)

  async function getTopVideo() {
    let { item } = await reqTopVideo()
    if (item.length > 6) item.length = 6
    item.forEach((item) => (item.pic = formatImgUrl(item.pic)))
    topVideos.value = item
  }

  async function getRegion(index: number, rid: number, page: number) {
    if (regionSections[index].archivesLoading) return
    regionSections[index].archivesLoading = true
    const { archives } = await reqRegion(rid, page)
    regionSections[index].archives = archives
    regionSections[index].pn = page
    regionSections[index].archivesLoading = false
  }

  async function gerRank(index: number, rid: number) {
    regionSections[index].rankLoading = true

    const res = await reqRank(rid)
    if (res.length > 10) res.length = 10
    res.forEach((item) => (item.pic = formatImgUrl(item.pic)))
    regionSections[index].rank = res
    regionSections[index].rankLoading = false
  }

  onMounted(async () => {
    //挂载后先请求前两个分区
    getRegion(0, Number(reginRef.value[0].dataset.rid), 1)
    gerRank(0, reginRef.value[0].dataset.rid)
    getRegion(1, Number(reginRef.value[1].dataset.rid), 1)
    gerRank(1, reginRef.value[1].dataset.rid)

    getTopVideo()
  })

  //* ------------右侧固定导航bar,滚动效果联动与点击导航-------------------
  const reginRef = ref<any[]>([])
  const navRef = ref<any[]>([])

  const currRegionIndex = ref(0)

  const setCurrRegionIndex = () => {
    reginRef.value.forEach((item: Element, index) => {
      // const res = item.getBoundingClientRect().buttom > 300
      const offset = item.getBoundingClientRect()
      if (offset.top < 500 && offset.top > 400) {
        if (currRegionIndex.value === index) return
        // if (reginRef.value.length - 1 === index) return
        currRegionIndex.value = index
      }
    })
  }

  const th_watchScroll = throttle(setCurrRegionIndex, 10)

  window.addEventListener('scroll', th_watchScroll)

  const handleScroll = (index: number) => {
    window.removeEventListener('scroll', th_watchScroll)
    setTimeout(() => {
      window.addEventListener('scroll', th_watchScroll)
    }, 10)
    reginRef.value[index].scrollIntoView()
    currRegionIndex.value = index
  }

  watch(currRegionIndex, (index) => {
    //当屏幕滚动时或点击右边固定navBar时触发currRegionIndex(也就是当前显示active范围内的分区板块的index)改变
    //当currRegionIndex对应的Region里面没数据的话，就发请求
    if (regionSections[index].archives.length === 0) {
      const rid = Number(reginRef.value[index].dataset.rid)
      getRegion(index, rid, 1)
      gerRank(index, rid)
    }

    //当currRegionIndex对应的上一个和下一个Region里面没数据的话，就发请求(预先请求上下，避免Region未滚动到active识别高度时一片空白)
    if (index >= 1) {
      //Number(undefined) === NaN
      const prevRid = Number(reginRef.value[index - 1]?.dataset.rid)
      const nextRid = Number(reginRef.value[index + 1]?.dataset.rid)
      if (nextRid && regionSections[index + 1].archives.length === 0) {
        getRegion(index + 1, nextRid, 1)
        gerRank(index + 1, nextRid)
      }

      if (prevRid && regionSections[index - 1].archives.length === 0) {
        getRegion(index - 1, prevRid, 1)
        gerRank(index - 1, prevRid)
      }
    }
  })

  onUnmounted(() => {
    window.removeEventListener('scroll', th_watchScroll)
  })

  const router = useRouter()
  //rank请求回来的数据没有cid！！！
  const routerToVideo = (aid: number, bvid: string) => {
    router.push({
      name: 'Video',
      query: { aid, bvid },
    })
  }
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2974912_0g7sde8pnmga.css');
</style>

<style lang="less" scoped>
  .banner {
    font-size: 0;
    height: 155px;
    width: 100%;
    min-width: 1200px;
    // 这个banner的图片请求居然也要登录？？403。使用静态的
    background-image: url('./image/banner.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .full {
    width: 100%;
    min-width: 1200px;
  }
  .container {
    width: 1200px;
    margin: 0 auto;
  }

  .nav {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 18px 0;
    font-size: 14px;

    .left {
      display: flex;
      align-items: center;
      height: 100%;
      width: 200px;

      .left-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 50px;
        height: 100%;
        cursor: pointer;

        .iconfont {
          font-size: 26px;
          height: 40px;
          width: 40px;
          text-align: center;
          line-height: 40px;
          background-color: #ff5c7c;
          border-radius: 50%;
          font-weight: bold;
          color: #fff;
        }
      }
    }

    .mid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-content: space-between;
      padding: 0 10px;
      margin: 0 10px;
      box-sizing: border-box;
      height: 100%;
      width: 760px;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;

      .mid-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50%;
        box-sizing: border-box;
        padding: 5px 0;
        width: 90px;
        cursor: pointer;

        .count {
          background-color: skyblue;
          color: #fff;
          padding: 0 3px;
          border-radius: 2px;
          transform: scale(0.8);
        }

        .last {
          font-size: 12px;
        }
      }
    }

    .right {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      height: 100%;
      width: 200px;
      cursor: pointer;

      .right-item {
        display: flex;
        align-items: center;
        width: 66px;
        height: 50%;
      }
    }
  }

  .head {
    display: flex;
    justify-content: space-between;
    height: 240px;
    margin-bottom: 40px;

    .Carousel-warpper {
      position: relative;
      width: 550px;
      height: 100%;
      cursor: pointer;
    }

    .Carousel-img {
      height: 100%;
      width: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .Carousel-ctrl {
      position: absolute;
      bottom: 15px;
      right: 15px;
      height: 10px;
      display: flex;
      align-items: center;

      .pointer {
        position: relative;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        span {
          position: absolute;
          top: calc(50% - 10px);
          left: calc(50% - 10px);

          opacity: 0;
          width: 20px;
          height: 20px;
          // color: skyblue;
          background-image: url('./image/吃豆.png');
          background-size: cover;
          transition: all 300ms;
          transform: scale(0);

          &.active {
            opacity: 1;
            transform: scale(1);
          }
        }
      }
    }

    .head-right {
      position: relative;
      display: flex;
      width: 640px;
      height: 100%;
      flex-wrap: wrap;
      align-content: space-between;
      justify-content: space-between;

      .item {
        position: relative;
        width: 207px;
        height: 116px;
        // background-image: url('./image/cal.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        cursor: pointer;

        &:hover .mask {
          top: 0;
          background: #00000099;
        }

        &:hover .title {
          -webkit-line-clamp: 2 !important;
        }

        &:hover .play-icon {
          opacity: 1 !important;
        }

        .mask {
          position: absolute;
          top: 78px;
          box-sizing: border-box;
          padding: 6px;
          padding-top: 20px;
          height: 100%;
          width: 100%;
          color: #fff;
          // top: 90px;
          // background-color: transparent;
          background: linear-gradient(transparent, #000 80%);
          text-shadow: 1px 1px 3px #00000022;
          transition: all 300ms;
          // background-color: #000000aa;

          .title {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          .uper {
            margin: 10px 0;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: 12px;
            color: #ffffffcc;
            .nickname {
              display: inline-block;
              margin-left: 5px;
            }
          }

          .play-count {
            color: #ffffffcc;
          }

          .play-icon {
            position: absolute;
            bottom: 12px;
            right: 12px;
            font-size: 20px;
            opacity: 0;
            transition: all 300ms;
            transition-delay: 250ms;
          }
        }
      }
      .change-top-video {
        position: absolute;
        bottom: -30px;
        right: 0;
        display: flex;
        align-items: center;
        padding: 0 3px;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: background-color 200ms;
        cursor: pointer;
        // width: 70px;

        &:hover {
          background-color: #00000006;
        }

        &:active {
          background-color: #00000010;
        }
        .iconfont {
          margin-right: 3px;
          transform: scale(0.8);
        }
      }
    }
  }

  .main-item {
    display: flex;
    justify-content: space-between;
    height: 456px;
    margin-bottom: 40px;

    .left {
      height: 100%;
      width: 860px;
      .title {
        display: flex;
        margin-bottom: 14px;
        justify-content: space-between;
        height: 36px;
        align-items: center;

        .title-left {
          display: flex;
          align-items: center;

          img {
            width: 36px;
            height: 36px;
            margin: 0 5px;
          }

          .section-name {
            font-size: 23px;
          }
        }

        .title-right {
          display: flex;
          align-items: center;

          .change,
          .more {
            display: flex;
            align-items: center;
            padding: 0 3px;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: background-color 200ms;
            cursor: pointer;
            margin-left: 10px;

            &:hover {
              background-color: #00000006;
            }

            &:active {
              background-color: #00000010;
            }
          }
          .change .iconfont {
            margin-right: 3px;
            transform: scale(0.8);
          }
          .more .iconfont {
            transform: scale(0.6);
          }
        }
      }

      .video-list {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-between;
        height: 406px;

        .video-item {
          height: 190px;
          width: 206px;

          .img-warpper {
            position: relative;
            width: 100%;
            cursor: pointer;
            overflow: hidden;
            font-size: 0;

            img {
              width: 100%;
              height: 116px;
            }

            .label {
              position: absolute;
              display: flex;
              align-items: center;
              padding-top: 4px;
              bottom: 0px;
              left: 0;
              color: #eee;
              background: linear-gradient(transparent, #000000aa);
              width: 100%;
              height: 30px;
              font-size: 12px;

              .iconfont {
                margin-left: 6px;
                margin-right: 4px;
                font-size: 12px;
              }
            }

            .time {
              position: absolute;
              bottom: 7px;
              right: 7px;
              color: #eee;
              font-size: 12px;
            }
          }

          p {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 38px;
            margin: 7px 0;
            cursor: pointer;
            font-size: 14px;
          }

          .ower {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #84a3ac;

            .iconfont {
              margin-right: 4px;
            }
          }
        }
      }
    }
    .rank {
      height: 100%;
      width: 320px;

      .rank-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        height: 36px;
        .header {
          font-size: 23px;
        }

        .more {
          display: flex;
          align-items: center;
          padding: 0 3px;
          border: 1px solid #ddd;
          border-radius: 5px;
          transition: background-color 200ms;
          cursor: pointer;
          margin-left: 10px;

          &:hover {
            background-color: #00000006;
          }

          &:active {
            background-color: #00000010;
          }

          .iconfont {
            transform: scale(0.6);
          }
        }
      }

      .rank-main {
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        height: 406px;

        .rank-item {
          display: flex;
          padding: 6px 0;
          margin: 5px 0;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;

          .index {
            width: 26px;
            text-align: center;
            flex-shrink: 0;
            transform: scale(0.9);
            color: #666;
          }

          .rank-name {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: 14px;
            width: 294px;
          }
        }
      }
    }
  }

  .scroll-nav {
    position: fixed;
    top: 170px;
    right: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid skyblue;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    z-index: 9999;

    span {
      text-align: center;
      width: 60px;
      line-height: 24px;
      cursor: pointer;
      font-size: 13px;
      transition: all 200ms;

      &:hover,
      &.on {
        background-color: #00a1d6;
        color: #fff;
      }
    }
  }

  .footer {
    background-color: #f6f9fa;
    height: 300px;
  }

  .rank-popover {
    box-sizing: border-box;
    width: 300px;

    background-color: #fff;
    cursor: pointer;
    .rank-popover-top {
      display: flex;
      align-items: center;
      height: 68px;

      img {
        height: 68px;
        width: 120px;
      }

      .rank-popover-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        height: 68px;
        width: 154px;

        .v-rank-name {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          width: 100%;
          font-weight: bold;
          height: 40px;
        }

        .rank-popover-uper-time {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #a2a2a2;
          width: 120%;
          transform: scale(0.83) translateX(-10%);
          .rank-popover-uper {
            display: -webkit-inline-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            width: 54%;
          }
        }
      }
    }
    .divider {
      margin: 10px 0;
      width: 100%;
      height: 1px;
      background-color: #e7e7e7;
    }
    .rank-popover-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 14px;
      color: #999;

      transform: scale(0.9);

      .iconfont {
        margin-right: 3px;
        font-size: 12px;
      }
    }
  }
</style>
